<template>
  <div class="app-container">
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="120px"
    >
      <el-form-item label="用户名">
        <el-input v-model="form.username" disabled readonly="" />
      </el-form-item>
      <el-form-item label="所属权限组">
        <el-input v-model="form.groupname" disabled readonly="" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="form.mobile" />
      </el-form-item>
      <el-form-item label="姓名" prop="realname">
        <el-input v-model="form.realname" />
      </el-form-item>
      <el-form-item v-if="false" label="昵称" prop="nickname">
        <el-input v-model="form.nickname" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="form.password"
          autocomplete="new-password"
          placeholder="不填写则不修改密码"
          type="password"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
        >修改资料</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { update, getInfo } from '@/api/user'
export default {
  data() {
    return {
      // 表单验证规则
      rules: {
        mobile: [
          {
            required: true,
            min: 11,
            max: 11,
            message: '手机号不正确',
            trigger: 'blur'
          }
        ],
        realname: [
          { required: true, message: '必须填写真实姓名', trigger: 'blur' }
        ],
        // nickname: [
        //   { required: true, message: '必须填写昵称', trigger: 'blur' }
        // ],
        email: [
          {
            required: true,
            message: '邮箱填写不正确',
            type: 'email',
            trigger: 'blur'
          }
        ],
        password: [{ min: 6, message: '密码长度必须大于6位', trigger: 'blur' }]
      },
      // 表单数据
      form: {
        id: null,
        mobile: '',
        realname: '',
        nickname: '',
        email: '',
        password: ''
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 数据初始化方法
    async init() {
      const re = await getInfo()
      const { data } = re
      this.form = data
    },
    // 表单提交方法
    onSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          await update(this.form.mobile, this.form.realname, this.form.nickname, this.form.email, null, this.form.password)
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  max-width: 800px;
}
</style>
